<script setup lang="ts">
import {
  WechatOutlined,
  TaobaoCircleOutlined,
  LockOutlined,
  UserOutlined, MobileOutlined, MailOutlined
} from '@ant-design/icons-vue';
import {ref, reactive} from "vue";
const activeKey = ref('1');
const loginForm = reactive({
  account: '',
  password: '',
  mobile: '',
  captcha: ''
})
const formLogin = ref()

const isLoginError = ref(false)

function getCaptcha() {
  formLogin.value?.validate(['mobile']).then((res) => {
    console.log("666", res)
  })
}

</script>

<template>
  <div class="main">
    <a-form ref='formLogin' :model="loginForm">
      <a-tabs v-model:activeKey="activeKey" centered style="color: white">
        <a-tab-pane key="1" tab="账户密码登录">
          <a-form-item>
            <a-alert v-if="isLoginError" message="账户或密码错误" type="error" />
            <a-input v-model:value="loginForm.account" placeholder="账号">
              <template #prefix>
                <user-outlined :style="{ color: 'rgba(0,0,0,.25)' }"/>
              </template>
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input prefix-icon="Lock" v-model:value="loginForm.password" type="password" show-password placeholder="密码">
              <template #prefix>
                <lock-outlined :style="{ color: 'rgba(0,0,0,.25)' }"/>
              </template>
            </a-input>
          </a-form-item>
        </a-tab-pane>
        <a-tab-pane key="2" tab="手机号登录">
          <a-form-item name="mobile" :rules="[{ required: true, pattern: /^1[34578]\d{9}$/, message: 'Please input your mobile!' }]">
            <a-input v-model:value="loginForm.mobile" placeholder="手机号">
              <template #prefix>
                <mobile-outlined :style="{ color: 'rgba(0,0,0,.25)' }"/>
              </template>
            </a-input>
          </a-form-item>
          <a-row :gutter="24">
            <a-col :span="16">
              <a-form-item>
                <a-input prefix-icon="Message" v-model:value="loginForm.captcha" placeholder="账号">
                  <template #prefix>
                    <mail-outlined :style="{ color: 'rgba(0,0,0,.25)' }"/>
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8" style="float: right">
              <a-button style="width: 100%" @click="getCaptcha()">验证码</a-button>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>

      <a-form-item>
        <div style="width: 100%">
          <a-checkbox style="color: white">自动登录</a-checkbox>

          <router-link to="" style="float: right">忘记密码</router-link>
        </div>

      </a-form-item>

      <a-form-item>
        <a-button type="primary" style="width: 100%;height: 40px">登录</a-button>
      </a-form-item>

      <div style="color: white">
        <span>其他登录方式</span>
        <a>
          <wechat-outlined class="item-icon"/>
        </a>
        <a>
          <taobao-circle-outlined class="item-icon"/>
        </a>
        <a>
          <wechat-outlined class="item-icon"/>
        </a>
        <router-link to="" style="float: right">注册账号</router-link>
      </div>
    </a-form>
  </div>
</template>

<style lang="less" scoped>
@import "@/styles/login";
</style>
